<template>
  <div class="content bgWhite" >
    <ul class="f ulF">
      <li class="overflow3"> 成果名称： <span v-text="allData.title"></span></li>
      <li class="overflow3" v-if="allData.FinishMan"> 完成人员： <span   v-for="(item,index) in allData.FinishMan.split(',')" :key="index" v-text="item">研究成果</span></li>
      <li class="overflow3"> 所属单位： <span v-text="allData.WorkUnitName"></span></li>
      <li class="overflow3 relt"> 课题来源： <span  v-text="allData.EvaluationOrigin"></span> <span class="showMore" @click="showMore">
        <button>{{controlText}}</button>
        <img src="../../assets/commonImg/showMore201910-12.png" alt="" v-if="!showDetail">
        <img v-if="showDetail" src="../../assets/commonImg/closeMore20191012.png" alt=""></span></li>

    </ul>
    <div class="bgWhite mt10px " v-if="showDetail">
      <top-detail :allData="allData" ></top-detail>
    </div>
  </div>
</template>

<script>
  import topDetail from './detail-result-top-detail'//右侧顶部详情
    export default {
        name: "detail-result-top",
      components:{
        topDetail
      },
      data(){
          return{
            showDetail:false,
            controlText:'展开更多'

          }
      },
      props:{
        allData:Object
      },
   methods:{
          def_close(){
            this.showDetail=false
          },
          showMore(){
           this.showDetail=!this.showDetail
            this.controlText=!this.showDetail?"展开更多":'收起更多'
          }
   },
      watch:{
          allData(newV,oldV){
            // this.showDetail=true
          }
      }
    }
</script>

<style scoped>
  .content{
    padding: 15px 20px 5px 20px;
  }
  .content ul{
    margin-bottom: 0;
  }
  .content ul li{
    height: 30px;
    line-height: 30px;
    color: #717171;
  }
  .content ul li span{
    padding-right: 10px;
    color: #111111;
  }
  .flex200{
    flex: 0 0 180px;
  }
  .overflow3{
    width: 100% !important;
  }
  .ulF{
    flex-wrap: wrap
  }
  .showMore{
    position: absolute;
    right: 0px;
    color: #EF9D5A;
    /*text-decoration: underline;*/
    cursor: pointer;
  }
  .showMore button{
    border: none;
    outline: none;
    color: #EF9D5A;
    background-color: transparent;
    cursor: pointer;
    /*text-decoration: underline;*/
  }
  .relt img{
    width: 18px;
    position: relative;
    top: -2px;
    left: -6px;
  }
</style>
